// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
//   width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$account-name: 'account';
$account-x: 0px;
$account-y: 383px;
$account-offset-x: 0px;
$account-offset-y: -383px;
$account-width: 19px;
$account-height: 21px;
$account-total-width: 90px;
$account-total-height: 648px;
$account-image: 'sprite_commonIcon.png';
$account: (0px, 383px, 0px, -383px, 19px, 21px, 90px, 648px, 'sprite_commonIcon.png', 'account', );
$arrow-down-name: 'arrowDown';
$arrow-down-x: 0px;
$arrow-down-y: 15px;
$arrow-down-offset-x: 0px;
$arrow-down-offset-y: -15px;
$arrow-down-width: 9px;
$arrow-down-height: 5px;
$arrow-down-total-width: 90px;
$arrow-down-total-height: 648px;
$arrow-down-image: 'sprite_commonIcon.png';
$arrow-down: (0px, 15px, 0px, -15px, 9px, 5px, 90px, 648px, 'sprite_commonIcon.png', 'arrowDown', );
$arrow-right-name: 'arrowRight';
$arrow-right-x: 0px;
$arrow-right-y: 47px;
$arrow-right-offset-x: 0px;
$arrow-right-offset-y: -47px;
$arrow-right-width: 4px;
$arrow-right-height: 7px;
$arrow-right-total-width: 90px;
$arrow-right-total-height: 648px;
$arrow-right-image: 'sprite_commonIcon.png';
$arrow-right: (0px, 47px, 0px, -47px, 4px, 7px, 90px, 648px, 'sprite_commonIcon.png', 'arrowRight', );
$arrow-right-hover-name: 'arrowRight_hover';
$arrow-right-hover-x: 0px;
$arrow-right-hover-y: 30px;
$arrow-right-hover-offset-x: 0px;
$arrow-right-hover-offset-y: -30px;
$arrow-right-hover-width: 4px;
$arrow-right-hover-height: 7px;
$arrow-right-hover-total-width: 90px;
$arrow-right-hover-total-height: 648px;
$arrow-right-hover-image: 'sprite_commonIcon.png';
$arrow-right-hover: (0px, 30px, 0px, -30px, 4px, 7px, 90px, 648px, 'sprite_commonIcon.png', 'arrowRight_hover', );
$arrow-up-name: 'arrowUp';
$arrow-up-x: 0px;
$arrow-up-y: 0px;
$arrow-up-offset-x: 0px;
$arrow-up-offset-y: 0px;
$arrow-up-width: 9px;
$arrow-up-height: 5px;
$arrow-up-total-width: 90px;
$arrow-up-total-height: 648px;
$arrow-up-image: 'sprite_commonIcon.png';
$arrow-up: (0px, 0px, 0px, 0px, 9px, 5px, 90px, 648px, 'sprite_commonIcon.png', 'arrowUp', );
$close-name: 'close';
$close-x: 0px;
$close-y: 154px;
$close-offset-x: 0px;
$close-offset-y: -154px;
$close-width: 16px;
$close-height: 16px;
$close-total-width: 90px;
$close-total-height: 648px;
$close-image: 'sprite_commonIcon.png';
$close: (0px, 154px, 0px, -154px, 16px, 16px, 90px, 648px, 'sprite_commonIcon.png', 'close', );
$close2-name: 'close2';
$close2-x: 0px;
$close2-y: 206px;
$close2-offset-x: 0px;
$close2-offset-y: -206px;
$close2-width: 19px;
$close2-height: 19px;
$close2-total-width: 90px;
$close2-total-height: 648px;
$close2-image: 'sprite_commonIcon.png';
$close2: (0px, 206px, 0px, -206px, 19px, 19px, 90px, 648px, 'sprite_commonIcon.png', 'close2', );
$cnnic-name: 'cnnic';
$cnnic-x: 0px;
$cnnic-y: 615px;
$cnnic-offset-x: 0px;
$cnnic-offset-y: -615px;
$cnnic-width: 90px;
$cnnic-height: 33px;
$cnnic-total-width: 90px;
$cnnic-total-height: 648px;
$cnnic-image: 'sprite_commonIcon.png';
$cnnic: (0px, 615px, 0px, -615px, 90px, 33px, 90px, 648px, 'sprite_commonIcon.png', 'cnnic', );
$down-white-name: 'downWhite';
$down-white-x: 0px;
$down-white-y: 293px;
$down-white-offset-x: 0px;
$down-white-offset-y: -293px;
$down-white-width: 23px;
$down-white-height: 20px;
$down-white-total-width: 90px;
$down-white-total-height: 648px;
$down-white-image: 'sprite_commonIcon.png';
$down-white: (0px, 293px, 0px, -293px, 23px, 20px, 90px, 648px, 'sprite_commonIcon.png', 'downWhite', );
$fticon1-name: 'fticon1';
$fticon1-x: 0px;
$fticon1-y: 580px;
$fticon1-offset-x: 0px;
$fticon1-offset-y: -580px;
$fticon1-width: 25px;
$fticon1-height: 25px;
$fticon1-total-width: 90px;
$fticon1-total-height: 648px;
$fticon1-image: 'sprite_commonIcon.png';
$fticon1: (0px, 580px, 0px, -580px, 25px, 25px, 90px, 648px, 'sprite_commonIcon.png', 'fticon1', );
$fttime-name: 'fttime';
$fttime-x: 0px;
$fttime-y: 510px;
$fttime-offset-x: 0px;
$fttime-offset-y: -510px;
$fttime-width: 27px;
$fttime-height: 25px;
$fttime-total-width: 90px;
$fttime-total-height: 648px;
$fttime-image: 'sprite_commonIcon.png';
$fttime: (0px, 510px, 0px, -510px, 27px, 25px, 90px, 648px, 'sprite_commonIcon.png', 'fttime', );
$goout-name: 'goout';
$goout-x: 0px;
$goout-y: 323px;
$goout-offset-x: 0px;
$goout-offset-y: -323px;
$goout-width: 16px;
$goout-height: 20px;
$goout-total-width: 90px;
$goout-total-height: 648px;
$goout-image: 'sprite_commonIcon.png';
$goout: (0px, 323px, 0px, -323px, 16px, 20px, 90px, 648px, 'sprite_commonIcon.png', 'goout', );
$language-name: 'language';
$language-x: 0px;
$language-y: 353px;
$language-offset-x: 0px;
$language-offset-y: -353px;
$language-width: 18px;
$language-height: 20px;
$language-total-width: 90px;
$language-total-height: 648px;
$language-image: 'sprite_commonIcon.png';
$language: (0px, 353px, 0px, -353px, 18px, 20px, 90px, 648px, 'sprite_commonIcon.png', 'language', );
$notice-name: 'notice';
$notice-x: 0px;
$notice-y: 414px;
$notice-offset-x: 0px;
$notice-offset-y: -414px;
$notice-width: 18px;
$notice-height: 21px;
$notice-total-width: 90px;
$notice-total-height: 648px;
$notice-image: 'sprite_commonIcon.png';
$notice: (0px, 414px, 0px, -414px, 18px, 21px, 90px, 648px, 'sprite_commonIcon.png', 'notice', );
$notice2-name: 'notice2';
$notice2-x: 0px;
$notice2-y: 180px;
$notice2-offset-x: 0px;
$notice2-offset-y: -180px;
$notice2-width: 24px;
$notice2-height: 16px;
$notice2-total-width: 90px;
$notice2-total-height: 648px;
$notice2-image: 'sprite_commonIcon.png';
$notice2: (0px, 180px, 0px, -180px, 24px, 16px, 90px, 648px, 'sprite_commonIcon.png', 'notice2', );
$pwd-name: 'pwd';
$pwd-x: 0px;
$pwd-y: 264px;
$pwd-offset-x: 0px;
$pwd-offset-y: -264px;
$pwd-width: 19px;
$pwd-height: 19px;
$pwd-total-width: 90px;
$pwd-total-height: 648px;
$pwd-image: 'sprite_commonIcon.png';
$pwd: (0px, 264px, 0px, -264px, 19px, 19px, 90px, 648px, 'sprite_commonIcon.png', 'pwd', );
$refresh-name: 'refresh';
$refresh-x: 0px;
$refresh-y: 129px;
$refresh-offset-x: 0px;
$refresh-offset-y: -129px;
$refresh-width: 15px;
$refresh-height: 15px;
$refresh-total-width: 90px;
$refresh-total-height: 648px;
$refresh-image: 'sprite_commonIcon.png';
$refresh: (0px, 129px, 0px, -129px, 15px, 15px, 90px, 648px, 'sprite_commonIcon.png', 'refresh', );
$refresh1-name: 'refresh1';
$refresh1-x: 0px;
$refresh1-y: 105px;
$refresh1-offset-x: 0px;
$refresh1-offset-y: -105px;
$refresh1-width: 14px;
$refresh1-height: 14px;
$refresh1-total-width: 90px;
$refresh1-total-height: 648px;
$refresh1-image: 'sprite_commonIcon.png';
$refresh1: (0px, 105px, 0px, -105px, 14px, 14px, 90px, 648px, 'sprite_commonIcon.png', 'refresh1', );
$setting-name: 'setting';
$setting-x: 0px;
$setting-y: 235px;
$setting-offset-x: 0px;
$setting-offset-y: -235px;
$setting-width: 18px;
$setting-height: 19px;
$setting-total-width: 90px;
$setting-total-height: 648px;
$setting-image: 'sprite_commonIcon.png';
$setting: (0px, 235px, 0px, -235px, 18px, 19px, 90px, 648px, 'sprite_commonIcon.png', 'setting', );
$sitemap-name: 'sitemap';
$sitemap-x: 0px;
$sitemap-y: 545px;
$sitemap-offset-x: 0px;
$sitemap-offset-y: -545px;
$sitemap-width: 26px;
$sitemap-height: 25px;
$sitemap-total-width: 90px;
$sitemap-total-height: 648px;
$sitemap-image: 'sprite_commonIcon.png';
$sitemap: (0px, 545px, 0px, -545px, 26px, 25px, 90px, 648px, 'sprite_commonIcon.png', 'sitemap', );
$tel-name: 'tel';
$tel-x: 0px;
$tel-y: 476px;
$tel-offset-x: 0px;
$tel-offset-y: -476px;
$tel-width: 24px;
$tel-height: 24px;
$tel-total-width: 90px;
$tel-total-height: 648px;
$tel-image: 'sprite_commonIcon.png';
$tel: (0px, 476px, 0px, -476px, 24px, 24px, 90px, 648px, 'sprite_commonIcon.png', 'tel', );
$top-q-name: 'topQ';
$top-q-x: 0px;
$top-q-y: 82px;
$top-q-offset-x: 0px;
$top-q-offset-y: -82px;
$top-q-width: 12px;
$top-q-height: 13px;
$top-q-total-width: 90px;
$top-q-total-height: 648px;
$top-q-image: 'sprite_commonIcon.png';
$top-q: (0px, 82px, 0px, -82px, 12px, 13px, 90px, 648px, 'sprite_commonIcon.png', 'topQ', );
$triangle-name: 'triangle';
$triangle-x: 0px;
$triangle-y: 64px;
$triangle-offset-x: 0px;
$triangle-offset-y: -64px;
$triangle-width: 18px;
$triangle-height: 8px;
$triangle-total-width: 90px;
$triangle-total-height: 648px;
$triangle-image: 'sprite_commonIcon.png';
$triangle: (0px, 64px, 0px, -64px, 18px, 8px, 90px, 648px, 'sprite_commonIcon.png', 'triangle', );
$user-icon-name: 'userIcon';
$user-icon-x: 0px;
$user-icon-y: 445px;
$user-icon-offset-x: 0px;
$user-icon-offset-y: -445px;
$user-icon-width: 18px;
$user-icon-height: 21px;
$user-icon-total-width: 90px;
$user-icon-total-height: 648px;
$user-icon-image: 'sprite_commonIcon.png';
$user-icon: (0px, 445px, 0px, -445px, 18px, 21px, 90px, 648px, 'sprite_commonIcon.png', 'userIcon', );
$spritesheet-width: 90px;
$spritesheet-height: 648px;
$spritesheet-image: 'sprite_commonIcon.png';
$spritesheet-sprites: ($account, $arrow-down, $arrow-right, $arrow-right-hover, $arrow-up, $close, $close2, $cnnic, $down-white, $fticon1, $fttime, $goout, $language, $notice, $notice2, $pwd, $refresh, $refresh1, $setting, $sitemap, $tel, $top-q, $triangle, $user-icon, );
$spritesheet: (90px, 648px, 'sprite_commonIcon.png', $spritesheet-sprites, );

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
